<template>
    <div>
      <swiper :options="swiperOption" ref="mySwiper">
        <div class="swiper-slide" v-for="(val, slide) in swiperSlides" :key="slide">
          <img :src="val.img" alt="">
        </div>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <!--活动-->
      <div class="activity">
        <img class="active" v-for="(val, key) in active" :key="key" :src="val.img" alt="">
      </div>
    </div>
</template>

<script>
export default {
  name: 'cast',
  data () {
    return {
      swiperSlides: [
        {img: require('./image/banner/155905092269162676_wps.png')},
        {img: require('./image/banner/0656d00fcccc4a618eee1f4811fddc7b_th.jpg')},
        {img: require('./image/banner/8e54925342144841a82058a7d825c07a.jpg')},
        {img: require('./image/banner/64f433861ebe4e3b917b25c84d3b7953.jpg')},
        {img: require('./image/banner/3ea58547dfe54657bac3e079ee86fae2.jpg')}
      ],
      swiperOption: {
        // autoplay: {
        //   // 用户操作之后是否禁止
        //   disableOnInteraction: true
        // },
        autoplay: false,
        preventLinksPropagation: false,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets'
        }
      },
      active: [
        {img: require('./image/banner/155921683498601203.png')},
        {img: require('./image/banner/155921685876387844.png')}
      ]
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted () {
    let pointer = this.swiper.pagination.bullets
    for (let i = 0; i < pointer.length; i++) {
      pointer[i].style.width = '15px'
      pointer[i].style.height = '3px'
      pointer[i].style.background = '#ffffff'
    }
  }
}
</script>

<style scoped lang="scss">
  div{
    .swiper-wrapper{
      width: 1240px;
      .swiper-slide{
        width: 100vw;
        height: 675px;
        img{
          width: 100vw;
          height: 675px;
        }
      }
    }
    .activity{
      width: 100vw;
      height: 340px;
      position: relative;
      .active{
        width: 50%;
        height: 340px;
      }
    }
  }
</style>
